<template>
  <div class="item-cont item-table">
    <div class="thead flex-cb">
      <div class="td">地址</div>
      <div class="td">隐患名称</div>
      <div class="td">隐患等级</div>
      <div class="td">状态</div>
    </div>
    <div class="tbody">
      <vue3-seamless-scroll :list="tableData" :step="0.5" :hover="true">
        <ul class="scroll">
          <li v-for="(item, index) in tableData" :key="index" class="flex-cb">
            <div class="td">
              {{
                item.address.length > 5
                  ? item.address.substr(0, 5) + "."
                  : item.address
              }}
            </div>
            <div class="td" style="color:red">{{ item.dangerName }}</div>
            <div class="td">{{ item.levelText }}</div>
            <div class="td">
              <span v-if="item.status == null" type="primary">--</span>
              <span v-if="item.status == 0" type="success">暂不处理</span>
              <span v-if="item.status == 1" type="info">待处理</span>
              <span v-if="item.status == 2" type="warning">处理中</span>
              <span v-if="item.status == 3" type="danger" style="color:green">已处理</span>
            </div>
          </li>
        </ul>
      </vue3-seamless-scroll>
    </div>
    <div class="box">
      <div>
        <p>
          <!-- <img src="../../../assets/device/1.png" />  -->
          <box-icon
            color="red"
            size="20px"
            name="error-circle"
            type="solid"
            class="v-top"
          />
          发现隐患
        </p>
        <p>{{ fxyh }}个</p>
      </div>
      <div>
        <p>
          <box-icon
            color="#63ff69"
            size="20px"
            name="select-multiple"
            type="solid"
            class="v-top"
          />
          已处理隐患
        </p>
        <p>{{ yclyh }}个</p>
      </div>
      <div>
        <p>
          <box-icon
            color="#63ff69"
            size="20px"
            name="time"
            type="solid"
            class="v-top"
          />
          待处理隐患
        </p>
        <p>{{ dclyh }}个</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import moment from "moment";
import DashboardAPI from "@/api/DashboardAPI";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const fxyh = ref(0);
const yclyh = ref(0);
const dclyh = ref(0);
let tableData = ref([]);

function defaultOption() {
  return {
    step: 0.2, // 数值越大速度滚动越快
    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
    hoverStop: true, // 是否开启鼠标悬停stop
    direction: 1, // 0向下 1向上 2向左 3向右
    openWatch: true, // 开启数据实时监控刷新dom
    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
    waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
  };
}

// 巡检隐患上报
function f_QueryInsp1() {
  let params = {
    StartTime: moment(new Date()).format("yyyy-MM-01 00:00:00"),
    EndTime: moment(new Date()).format("yyyy-MM-31 23:59:59"),
  };
  DashboardAPI.api_insp_danger_count(params).then(({ data }) => {
    fxyh.value = data.dangerTotal;
    yclyh.value = data.handleDangerTotal;
    dclyh.value = data.todoDangerTotal;
  });
}

// 隐患上报清单
function f_QueryInsp2() {
  let params = {
    StartTime: moment(new Date()).format("yyyy-MM-01 00:00:00"),
    EndTime: moment(new Date()).format("yyyy-MM-31 23:59:59"),
    // Status: 1, // Desc:隐患状态 0暂不处理 1待处理 2处理中 3已处理 Default: Nullable:True
    Type: 2, // Desc:巡检计划清单 1-今日 2-月度 3-年度 Default: Nullable:True
  };
  DashboardAPI.api_insp_danger(params).then((data) => {
    tableData.value = data.data;
  });
}

onMounted(() => {
  f_QueryInsp1();
  f_QueryInsp2();
});
</script>
<style lang="scss" scoped>
.item-table {
  height: 20vh;
  margin-top: 1vh;
  background: transparent !important;

  .td {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    float: left;
    width: 25%;
    height: 3.1vh;
    font-size: 1vh;
    color: #d7e5ff;
    text-align: center;
    text-align: left;
  }

  .thead {
    font-size: 1.2vh;
    color: #839ecb;
    background: rgba(#0e3469, 0.7);
  }

  .tbody {
    width: 100%;
    height: 16vh;
    overflow: hidden;
    background: transparent !important;

    td {
      color: #82bfff !important;
    }
  }

  .box {
    display: flex;
    margin-top: 1vh;

    div {
      flex: 1;
    }

    p {
      height: 2vh;
      font-size: 1.3vh;
      line-height: 2vh;
      text-align: center;
    }

    img {
      height: 2vh;
      vertical-align: sub;
    }
  }
}
</style>
